<template>
    <el-pagination background :layout="layout" :page-sizes="sizes" v-model:page-size="data.size" :total="count"
        v-model:current-page="data.current" @size-change="sizesChange" @current-change="currentChange"></el-pagination>
</template>
   
<script setup>
import { reactive } from "vue";
const props = defineProps({
    //总数
    count: {
        type: Number,
        default: 0,
    },
    // 组件布局
    layout: {
        type: String,
        default: "total,sizes, prev, pager, next, jumper, ->, slot", //分页组件会展示的功能项
    },
    // 分页数选项
    sizes: {
        type: Array,
        default: () => {
            return [10, 20, 30, 40, 50];
        }
    },
    // 当前页
    current: {
        type: Number,
        default: 1,
    },
    // 分页数
    size: {
        type: Number,
        default: 10,
    }
});

let data = reactive({
    size: props.size,
    current: props.current,
});
const emit = defineEmits(["getPage"]);

// 分页数选项改变
const sizesChange = (val) => {
    data.size = val;
    emit("getPage", data);
};

// 分页数改变
const currentChange = (val) => {
    data.current = val;
    emit("getPage", data);
};
</script>